<!--
 * @Author: zhangjingyu
 * @Date: 2020-11-11 14:04:01
 * @LastEditors: zhangjingyu
 * @LastEditTime: 2021-05-19 09:42:54
 * @FilePath: \vprisk10.14\src\views\SystemMange\onlineUser.vue
 * @Description: 在线用户监控
-->

<template>
  <!-- 在线用户监控页面 -->
  <div>
    <el-row class="caliberHierarchy container">
      <el-col style="margin-right:10px;" class="content-left">
        <el-row class="handleBox">
          <el-col :span="18">
            <el-button  @click="forcBack('1')"
              >强制签退</el-button
            >
            <el-button  @click="reload('2')">重新加载</el-button>
          </el-col>
          <el-col :span="6">
            <div class="handleIconBox">
              <el-popover
                placement="left-start"
                trigger="click"
                popper-class="icon_porper"
              >
                <onlyOneSearch v-model="searchForm.username" placeholder="请输入登录名" :search-method="searchClick"></onlyOneSearch>
                <i
                  class="iconfont icon-sousuo"
                  title="搜索"
                  slot="reference"
                ></i>
              </el-popover>
              <el-popover
                placement="bottom"
                width="150"
                trigger="click"
                popper-class="icon_porper"
              >
                <div class="operation_checkbox">
                  <el-checkbox-group v-model="checkList">
                    <el-checkbox
                      v-for="item in textData"
                      :label="item.label"
                      :key="item.prop"
                      >{{ item.label }}
                    </el-checkbox>
                  </el-checkbox-group>
                </div>
                <i
                  class="iconfont icon-liebiaoshezhi"
                  title="列表设置"
                  slot="reference"
                ></i>
              </el-popover>
            </div>
          </el-col>
        </el-row>
        <el-table
          ref="multipleTable"
          :data="tableData"
          
          style="width: 100%"
          @row-click="authorizeFor"
        >
          <el-table-column
            width="55"
            type="selection"
            
          ></el-table-column>
          <el-table-column
            prop="username"
            label="登录名"
            header-align="left"
            v-if="columnState[0]"
          >
          </el-table-column>
          <el-table-column
            prop="realname"
            label="姓名"
            header-align="left"
            v-if="columnState[1]"
          >
          </el-table-column>
          <el-table-column
            prop="orgName"
            label="机构"
            header-align="left"
            v-if="columnState[2]"
         show-overflow-tooltip
          >
          </el-table-column>

          <el-table-column
            prop="loginIp"
            label="登录IP"
            v-if="columnState[3]"
            header-align="right"
            align="right"
          >
          </el-table-column>
          <el-table-column
            prop="loginTime"
            label="登录时间"
            sortable
            header-align="right"
            v-if="columnState[4]"
            align="right"
          >
           <template slot-scope="scope">
            <div>
              {{timeFormat(scope.row.loginTime)}}
            </div>
          </template>
          </el-table-column>
          <el-table-column
            prop="lastRequest"
            label="最后一次请求时间"
            sortable
            header-align="right"
            v-if="columnState[5]"
            align="right"
          >
          <template slot-scope="scope">
            <div>
              {{timeFormat(scope.row.lastRequest)}}
            </div>
          </template>
          </el-table-column>
            <el-table-column
            prop="expired"
            label="是否失效"
            sortable
            header-align="left"
            v-if="columnState[6]"
            :formatter="(row)=>row.expired?'是':'否'"
          >

          </el-table-column>
        </el-table>
        <pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="1"
        :page-size="searchForm.size"
      
          :total="400"
        ></pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { publicManage_pub } from "@/api/index";
import onlyOneSearch from "@/components/onlyOneSearch";
import moment from 'moment';
export default {
  data() {
    return {
      userName: "", //右侧用户名
      userDo: "授权角色", // 右侧用户行为
      userDoFlag: 0,
      addOrEdit: false, // 新增/编辑/查看弹窗
      isModuleData: false, //同步模块数据弹窗
      serachMore: false,
      isProConfig: false, //工程表配置弹窗
      saveFlg: 1, // 1:新增，2：编辑，3查看,
      saveTitles: ["添加工程信息", "编辑工程信息"],
      // 机构树
      orgList: [
        {
          value: "01",
          label: "一级机构",
          children: [{ value: "001", label: "二级机构" }]
        }
      ],
      moduleDataForm: {},
      // 右侧树data
      treeData: [
        {
          id: 1,
          label: "一级 1",
          children: [
            {
              id: 4,
              label: "二级 1-1",
              children: [
                {
                  id: 9,
                  label: "三级 1-1-1"
                },
                {
                  id: 10,
                  label: "三级 1-1-2"
                }
              ]
            }
          ]
        },
        {
          id: 2,
          label: "一级 2",
          children: [
            {
              id: 5,
              label: "二级 2-1"
            },
            {
              id: 6,
              label: "二级 2-2"
            }
          ]
        },
        {
          id: 3,
          label: "一级 3",
          children: [
            {
              id: 7,
              label: "二级 3-1"
            },
            {
              id: 8,
              label: "二级 3-2"
            }
          ]
        }
      ],
      defaultProps: {
        children: "children",
        label: "label"
      },
      // 角色管理下拉框
      mgrRoleIdList: [
        {
          value: "选项1",
          label: "模块1"
        },
        {
          value: "选项2",
          label: "模块2"
        }
      ],
      // search机构树悬停提示
      searchOrgTip: "",
      // save表单机构树悬停提示
      saveOrgTip: "",
      searchForm: {
        username: "",
        page: 1,
        size: 10
      },
      searchFF: {},

      checkList: [],
      // 完整表头字段&&列属性配置
      textData: [
        { prop: "username", label: "登录名" },
        { prop: "realname", label: "姓名" },
        { prop: "orgName", label: "机构" },
        { prop: "loginIp", label: "登录IP" },
        { prop: "loginTime", label: "登录时间" },
        { prop: "lastRequest", label: "最近一次请求时间" },
        { prop: "expired", label: "是否失效" }
      ],
      // 获取table的数据
      tableData: [
        // {
        //   sessionId:
        //     "JrRvfxnGGhYb24fG4hLnYrWXjx5vKGyT9CXr3kCHd8p7pnHJsycx!-441430790!1601252964002",
        //   username: "sysadmin",
        //   realname: "sys",
        //   orgName: "泛鹏银行",
        //   loginIp: "192.168.3.235",
        //   loginTime: 1601252964012,
        //   lastRequest: 1601284302571,
        //   expired: false
        // },
        // {
        //   sessionId:
        //     "qSgRfxzdBxtSWjlLcXH2hzj7nLPJLy4G1Phn3LV8Zlf29J1cyrBM!-441430790!1601270589704",
        //   username: "sysadmin",
        //   realname: "sys",
        //   orgName: "泛鹏银行",
        //   loginIp: "192.168.1.229",
        //   loginTime: 1601270589713,
        //   lastRequest: 1601284099789,
        //   expired: false
        // },
        // {
        //   sessionId:
        //     "wkLMfx1RdMQmbLzF1PBqyzpVD22pCKgmFDy1P9q04Tp4SHDr9MBz!-441430790!1601271281514",
        //   username: "sysadmin",
        //   realname: "sys",
        //   orgName: "泛鹏银行",
        //   loginIp: "192.168.3.254",
        //   loginTime: 1601271281522,
        //   lastRequest: 1601284191127,
        //   expired: false
        // },
        // {
        //   sessionId:
        //     "BnHLfxcMDP2Jm2zQss2VB1Y41Z1M9G7XBb0zgLFBpCDvKLQvfMmL!-441430790!1601281100951",
        //   username: "sysadmin",
        //   realname: "sys",
        //   orgName: "泛鹏银行",
        //   loginIp: "192.168.3.139",
        //   loginTime: 1601281100959,
        //   lastRequest: 1601283809043,
        //   expired: false
        // },
        // {
        //   sessionId:
        //     "cQvbfxfMC1M8NpwLzJhhmtlvJSy40TPnjZ2fNG8QynyGQLmjGLp3!-441430790!1601281804937",
        //   username: "sysadmin",
        //   realname: "sys",
        //   orgName: "泛鹏银行",
        //   loginIp: "192.168.1.229",
        //   loginTime: 1601281804967,
        //   lastRequest: 1601284206718,
        //   expired: false
        // }
      ]
    };
  },
  components:{
    onlyOneSearch
  },
  created() {
    this.checkListInit();
  },
  computed: {
    columnState() {
      console.log(this.checkList);
      let arr = [],
        arr1 = this.textData,
        arr2 = this.checkList;
      for (let i = 0; i < arr1.length; i++) {
        let flg = false;
        for (let j = 0; j < arr2.length; j++) {
          if (arr1[i].label === arr2[j]) {
            flg = true;
          }
        }
        arr.push(flg);
      }
      return arr;
    }
  },
  mounted() {
    // this.getList();
  },
  watch: {
      addOrEdit() {
      // 窗口打开或关闭清除校验结果
      if (this.$refs.saveForm) {
        this.$refs.saveForm.clearValidate();
      }
    },
  },
  methods: {
    checkListInit() {
      this.checkList = this.textData.map(v => {
        return v.label;
      });
    },
    searchClick(){
      this.searchForm.page = 1;
      this.searchFunc();
    },
    searchFunc(e){
      console.log(this.searchForm,e)
    },
    forcBack(data) {
      let val = data == "1" ? "强制签退" : "";
      let selection = this.$refs.multipleTable.selection;
      if (selection.length < 1) {
        return this.$message.warning("请选择要" + val + "的用户");
      }
      this.$confirm(`您确定要${val}所选用户吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message.success(val + "成功");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消" + val
          });
        });
    },
    handleNodeClick() {
      let nodes = this.$refs.configTree.getCheckedNodes();
      console.log(nodes);
    },
    caliberProjectNameFormatter(row) {
      return row.caliberProject.caliberProjectName;
    },
    getList() {
      publicManage_pub.query("我的参数").then(res => {
        console.log(res);
      });
    },
    // 点击表格右侧显示为xx授权
    authorizeFor(row) {
      if (this.$refs.multipleTable) {
        this.$refs.multipleTable.clearSelection();
      }
      this.$refs.multipleTable.toggleRowSelection(row, true);
      this.userName = row.roleName;
    },
    // 重新加载
    reload() {
      this.isModuleData = true;
    },
    timeFormat(val){
      return moment(val).format('YYYY-MM-DD')
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  }
};
</script>

<style lang="scss" scoped>
.dialogSearchBox {
  header {
    text-align: center;
    span {
      margin: 0 20px;
    }
  }
}
</style>